<template>
  <div class="Slide">
    <div v-html="html"
         v-if="html"
         @click="BangDi($event)"></div>
    <div v-if="Slides"
         @click="BangDi($event)">
      <div class="top-rated">
        <p class="title">近期最受期待</p>
        <div class="top-rated-list">
          <div class="top-rated-item"
               v-for="item in Slides"
               :key="item.id"
               :data-id="item.id">
            <div class="poster default-img-bg">
              <img :src="item.img | imgFilter1"
                   onerror="this.style.visibility='hidden'">
              <span class="wish-bg"></span>
              <span class="wish"><span class="rated-score">{{item.wish}}</span>人想看</span>
            </div>
            <h5 class="name line-ellipsis">{{item.nm}}</h5>
            <p class="date">{{item.comingTitle|delWeek}}</p>
          </div>
        </div>
      </div>

    </div>
  </div>
</template>
<script>

export default {
  props: {
    html: String,
    Slides: Array
  },
  created () {

    // console.log('create')
    // window.onbeforeunload = function (event) {
    //   console.log('created')
    //   this.BangDi()
    // }
    // window.addEventListener('load', function () {
    //   alert('open')
    //   console.log('created')
    //   this.BangDi()
    // })
  },
  filters: {
    delWeek (val) {
      return val.substring(0, 5)
    }
  },

  data () {
    return {}
  },
  methods: {
    BangDi (event) {
      // console.log(event)
      // console.log(this)
      const self = this
      if (event.target.nodeName === 'IMG') {
        // 获取触发事件对象的属性
        self.$router.push({
          path: '/home/detail/1299372'
        })
      }
    }
  }

}
</script>
<style lang="scss" scoped>
.Slide {
  > div {
    background-color: #fff;
    color: #777;
    margin: 0 0 10px;
    padding: 12px 15px;
    /deep/ .top-rated {
      p.title {
        color: #333;
        font-size: 14px;
        margin: 0 0 12px;
      }
      .top-rated-list::-webkit-scrollbar {
        display: none; /* Chrome Safari */
      }
      .top-rated-list {
        display: flex;
        overflow-x: auto;
        .top-rated-item {
          display: inline-block;
          width: 85px;
          margin-right: 15px;
          .poster {
            position: relative;
            height: 115px;
            .score,
            .wish {
              font-size: 12px;
              font-weight: bold;
              color: #faaf00;
              position: absolute;
              bottom: 5px;
              left: 8px;
            }
          }
          .line-ellipsis {
            color: #222;
            font-size: 13px;
            height: 16px;
            font-weight: bold;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
            word-break: break-all;
            margin: 3px 0;
          }
          .date {
            font-size: 12px;
            color: #999;
          }
          img {
            width: 85px;
            height: 115px;
          }
        }
      }
    }
  }
}
</style>
